<template>
  <el-dialog :model-value="props.isShow" title="添加菜单" width="700" center :before-close="cancel">
    <el-form :model="menuInfo" :rules="rules" ref="refForm">
      <el-form-item label="菜单名称" label-width="120px" prop="title">
        <el-input v-model="menuInfo.title" />
      </el-form-item>
      <el-form-item label="上级菜单" label-width="120px" prop="pid">
        <!-- <template v-slot="item"> -->
            <el-select v-model="menuInfo.pid" placeholder="请选择上级菜单">
              <el-option label="顶级菜单" :value="0" />
              <el-option :label="item.title" :value="item.id" v-for="item in get_menuList" :key="item.id" />
          </el-select>
        <!-- </template> -->
      </el-form-item>
      <el-form-item label="菜单类型" label-width="120px">
        <el-radio v-model="menuInfo.type" :label="1">目录</el-radio>
        <el-radio v-model="menuInfo.type" :label="2">菜单</el-radio>
      </el-form-item>
      <el-form-item label="菜单地址" label-width="120px" v-if="menuInfo.type ==1">
        <el-input v-model="menuInfo.url" />
      </el-form-item>
      <el-form-item label="菜单图标" label-width="120px" v-else>
        <el-input v-model="menuInfo.icon" />
      </el-form-item>
      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="menuInfo.status"
          :active-value="1"
          :inactive-value="2"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="Confirm" v-if="props.isAdd">
          确定
        </el-button>
        <el-button type="primary" @click="editItem" v-else>
          编辑
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, defineProps, defineEmits,computed,defineExpose } from 'vue'
import { menuadd,menuinfo,menuedit } from '@/request/api'
import { useStore } from 'vuex'
let $store = useStore()
const props = defineProps(['isShow','isAdd'])
const emit = defineEmits(['cancel'])
const refForm = ref()
// 关闭弹框
const cancel = ()=>{
    emit('cancel')
    // 重置该表单项，将其值重置为初始值，并移除校验结果
    refForm.value.resetFields()
    reset()
}
const action_menuList = ()=>{
  $store.dispatch('menu/action_menuList')
}
const get_menuList = computed(()=>{
  return $store.state.menu.menuList
})
// 添加菜单
const Confirm = ()=>{
    refForm.value.validate(async (val)=>{
      if(!val){
        return
      }
      // 发送请求
      try{
        let res = await menuadd(menuInfo.value)
        if(res.code==200){
          ElMessage.success(res.msg)
          action_menuList()
          cancel()
        }else{
          ElMessage.warning(res.msg)
        }
      }catch(err){
        ElMessage.error(err)
      }
    })
    // cancel()
}
// 数据回显
const lookup =async (id)=>{
  console.log(id);
  try{
    let res = await menuinfo({id})
    if(res.code==200){
      menuInfo.value = res.list
      menuInfo.value.id = id
    }else{
      ElMessage.warning(res.msg)
    }
  }catch(err){
    ElMessage.error(err)
  }
}
defineExpose({
  lookup
})
// 编辑信息
const editItem = ()=>{
  refForm.value.validate(async (val)=>{
      if(!val){
        return
      }
      // 发送请求
      try{
        let res = await menuedit(menuInfo.value)
        if(res.code==200){
          ElMessage.success(res.msg)
          action_menuList()
          cancel()
        }else{
          ElMessage.warning(res.msg)
        }
      }catch(err){
        ElMessage.error(err)
      }
    })
}
// 重置
const reset = ()=>{
  menuInfo.value = {
    pid: "", //上级分类编号  注意：顶级菜单-0  number
    title: "", //菜单名称string
    icon: "", //图标 string
    type: 1, //类型 1目录 2菜单 number
    url: "", //菜单地址 string
    status: 1, //状态   1正常2禁用   number类型number
  }
}
let menuInfo = ref({
  pid: "", //上级分类编号  注意：顶级菜单-0  number
  title: "", //菜单名称string
  icon: "", //图标 string
  type: 1, //类型 1目录 2菜单 number
  url: "", //菜单地址 string
  status: 1, //状态   1正常2禁用   number类型number
});
// 验证规则
const rules = reactive({
  title:[
        {
            required:true,  // 是否为必填项
            message:'请输入菜单名称',  // 提示信息
            trigger:'blur'  // 触发方式  blur | change
        },
        {
            min:2,max:8,message:'长度在2到8个字符',trigger:'blur'
        }
    ],
    pid:[
        {
            required:true,  // 是否为必填项
            message:'请选择分类',  // 提示信息
            trigger:'change'  // 触发方式  blur | change
        }
    ]
})
   
</script>

<style>
</style>